<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <el-divider />
      <el-row :gutter="10">
        <el-col class="tag-col" :span="6"><span class="tag-header"><strong>标签具有在提交历史上标记特定提交的能力</strong></span>
        </el-col>
        <el-col :span="4" :offset="8">
          <el-input
            v-model="search"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            size="medium"
            @keyup.enter.native="getTagList"
          />
        </el-col>
        <el-col :span="4">
          <el-select v-model="orderBy" size="medium" @change="getTagList">
            <el-option
              v-for="(item) in tagOrderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="1">
          <el-button size="medium" type="primary" @click="addDialogVisible = true">新标签</el-button>
        </el-col>
      </el-row>
      <el-divider />

      <el-table
        v-loading="listLoading"
        :data="tagList"
        :show-header="false"
        highlight-current-row
      >
        <el-table-column
          align="left"
        >
          <template slot-scope="{row}">
            <i class="el-icon-price-tag" /> &nbsp;<strong>{{ row.name }} </strong> {{ row.message }}<br>
            -o-
            <el-link type="primary" :href="commitDetailUrl(row.commit.id)" :underline="false">{{ row.commit.short_id }}</el-link>
            <strong>·</strong>
            <el-link :underline="false" type="warning">{{ row.commit.committed_date | filterTime }}</el-link>
            <strong v-show="!row.commit.message">·</strong>
            <el-link
              href="#"
              :underline="false"
              style="display: inline-block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 300px;"
              :title="row.commit.message"
            />
            <span
              v-if="row.release"
              :show-overflow-tooltip="true"
              :title="row.remark"
              style="display: inline-block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 300px;"
            >{{ row.release.description }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
        >
          <template slot-scope="{row, $index}">
            <el-dropdown split-button size="small">
              下载
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleDownload('zip', row)">
                  <el-link :underline="false" :href="row.download_url+ '/.zip'">下载 zip</el-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link :underline="false" :href="row.download_url+ '/.tar.gz'">下载 tar.gz</el-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link :underline="false" :href="row.download_url+ '/.tar.bz2'">下载 tar.bz2</el-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link :underline="false" :href="row.download_url+ '/.tar'">下载 tar</el-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tooltip class="item" effect="dark" content="编辑发行记录" placement="bottom-start">
              <el-button icon="el-icon-edit" size="small" @click="showEditRemark(row.release, row.name, $index)" />
            </el-tooltip>
            <el-button
              type="danger"
              style="margin-left:0px;"
              size="small"
              icon="el-icon-delete"
              @click="deleteTag(row)"
            />
          </template>

        </el-table-column>
      </el-table>

      <el-dialog
        title="新建标签"
        :visible.sync="addDialogVisible"
        width="60%"
        @open="getAllBranchAndTag"
      >
        <el-form ref="addTag" :model="addTagForm" :rules="rules" label-width="100px">
          <el-form-item label="标签名" prop="tagName">
            <el-input v-model="addTagForm.tagName" />
          </el-form-item>
          <el-form-item label="创建自" prop="addTagForm">
            <el-select
              v-model="addTagForm.createFrom"
              label="tagName"
              style="width: 100%"
            >
              <el-option-group label="分支">
                <el-option
                  v-for="item in allBranchAndTag.branches"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-option-group>
              <el-option-group label="标签">
                <el-option
                  v-for="item in allBranchAndTag.tags"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="消息">
            <el-input v-model="addTagForm.message" :rows="4" type="textarea" placeholder="(可选)添加一条消息到标签" />
          </el-form-item>
          <el-form-item label="发行说明" prop="remark">
            <el-input
              v-model="addTagForm.remark"
              :rows="4"
              type="textarea"
              placeholder="将发行说明添加到标签。它们将被存储在GitLab数据库中并显示在标签页上。"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTag">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="发布备注"
        :visible.sync="editDialogVisible"
        width="60%"
      >
        <el-form ref="editRemark" :model="editRemarkForm" label-width="80px">
          <el-form-item label="发行说明">
            <el-input
              v-model="editRemarkForm.remark"
              :rows="10"
              type="textarea"
              placeholder="(可选)将发行说明添加到标签。它们将被存储在GitLab数据库中并显示在标签页上。"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editTagRemark">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-col>
  </div>
</template>

<script>
    import { getData, postData } from '@/api/requestData'
    import GitNavigation from './components/GitNavigation'
    import { handleTimeDuration } from '@/utils/index'

    export default {
        filters: {
            filterTime(time) {
                return handleTimeDuration(time)
            }
        },
        components: {
            GitNavigation
        },
        data() {
            return {
                pid: this.$route.params.pid,
                pname: this.$route.params.projectName,
                search: '',
                orderBy: '',
                tagOrderOptions: [
                    { label: '名称顺序', value: 'name-asc' },
                    { label: '名称倒序', value: 'name-desc' },
                    { label: '最早更新', value: 'updated-asc' },
                    { label: '最近更新', value: 'updated-desc' }
                ],
                listLoading: false,
                tagList: [],
                downloadOptions: [],
                addDialogVisible: false,
                editDialogVisible: false,
                editRemarkForm: {
                    tag: '',
                    remark: ''
                },
                addTagForm: {
                    tagName: '',
                    createFrom: 'master',
                    message: '',
                    remark: ''
                },
                allBranchAndTag: [],
                rules: {
                    tagName: [{ required: true, message: '标签名称必填', trigger: 'blur' }],
                    createFrom: [{ required: true, message: '分支必选', trigger: 'blur' }],
                    remark: [{ required: true, message: '标签名称必填', trigger: 'blur' }]
                },
                editIndex: undefined
            }
        },
        created() {
            this.orderBy = this.tagOrderOptions[3].value
            this.getTagList()
        },
        methods: {
            showEditRemark(release, tagName, index) {
                this.editRemarkForm.remark = release === null ? '' : release.description
                this.editRemarkForm.tag = tagName
                this.editDialogVisible = true
                this.editIndex = index
            },
            getAllBranchAndTag() {
                getData('/git/public/branch/tag/' + this.pid).then((response) => {
                    this.allBranchAndTag = response.data
                }).catch(() => {
                })
            },
            getTagList() {
                const order = this.orderBy.split('-')
                const params = {
                    'search': this.search,
                    'orderBy': order[0],
                    'sort': order[1]
                }
                getData('/git/public/tag/list/' + this.pid, params).then((response) => {
                    this.listLoading = true
                    this.tagList = response.data.length > 0 ? response.data : []
                    this.listLoading = false
                }).catch(() => {
                })
            },
            handleDownload(type, row) {
                console.log(row)
            },
            deleteTag(row, index) {
                const msg = '删除 ' + row.name + ' 后无法恢复,您确定?'
                this.$confirm(msg, '提示', {
                    confirmButtonType: 'warning',
                    cancelButtonType: 'text',
                    type: 'error'
                }).then(() => {
                    // 确认处理逻辑
                    const uri = '/git/delete/tag/' + this.pid + '/' + row.name
                    getData(uri).then((response) => {
                        this.tagList.splice(index, 1)
                        this.$message.success(response.message)
                    }).catch(() => {
                    })
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            addTag() {
                this.$refs['addTag'].validate((valid) => {
                    if (valid) {
                        postData('/git/create/tag/' + this.pid, this.addTagForm).then((response) => {
                            this.tagList.push(response.data)
                            this.$message.success('创建成功')
                            this.addDialogVisible = false
                        }).catch(() => {
                        })
                    } else {
                        return false
                    }
                })
            },
            editTagRemark() {
                postData('/git/edit/tag/remark/' + this.pid, this.editRemarkForm).then((response) => {
                    this.tagList[this.editIndex].release = response.data
                    this.$message.success(response.message)
                    this.editDialogVisible = false
                }).catch(() => {
                })
            },
            commitDetailUrl(sha) {
                return '/git/commit/detail/' + this.pname + '/' + this.pid + '/' + sha
            }
        }
    }
</script>

<style>
  .el-icon-price-tag {
    transform: rotate(325deg);
    font-size: 60%;
  }
</style>
<style scoped>
  .tag-header {
    font-size: small;
  }

  .tag-col {
    padding-top: 8px;
  }
</style>
